分页组件
<template>
	<el-pagination
		:background="background"
		v-model:current-page="currentPage"
		v-model:page-size="pageSize"
		:layout="layout"
		:page-sizes="pageSizes"
		:total="total"
		v-bind="$attrs"
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
	/>
</template>

<script lang="ts" name="pagination">
import { nextTick } from 'vue';
import { defineComponent, computed } from 'vue';
interface Props {
	total: number;
	page: number;
	limit: number;
	pageSizes: Array<any>;
	layout: string;
	background: boolean;
	autoScroll: boolean;
	hidden: boolean;
}
export default defineComponent({
	name: 'Pagination',
	props: {
		total: {
			required: true,
			type: Number,
		},
		page: {
			type: Number,
			default: 1,
		},
		limit: {
			type: Number,
			default: 10,
		},
		pageSizes: {
			type: Array,
			default() {
				return [10, 20, 30, 50];
			},
		},
		layout: {
			type: String,
			default: 'total, sizes, prev, pager, next, jumper',
		},
		background: {
			type: Boolean,
			default: true,
		},
		autoScroll: {
			type: Boolean,
			default: true,
		},
		hidden: {
			type: Boolean,
			default: false,
		},
	},
	setup(props: Props, { emit }) {
		const currentPage: any = computed({
			get() {
				return props.page;
			},
			set(val) {
				emit('update:page', val);
			},
		});

		const pageSize: any = computed({
			get() {
				return props.limit;
			},
			set(val) {
				emit('update:limit', val);
			},
		});

		const handleSizeChange = (val: number) => {
			emit('pagination', { pageNum: currentPage.value, pageSize: val });
		};

		const handleCurrentChange = (val: number) => {
			nextTick(() => {
				emit('pagination', { pageNum: val, pageSize: pageSize.value });
			});
		};
		return {
			currentPage,
			pageSize,
			handleSizeChange,
			handleCurrentChange,
		};
	},
});
</script>


<style scoped lang="scss">

</style>
